<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>访客列表-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
</head>
<body ontouchstart>
<div class="weui_tab tab-bottom">
	<div class="weui_tab_bd">
		<div class="weui-header bg-blue"> 
			<div class="weui-header-left"> <a onclick="back()" class="icon icon-109 f-white">返回</a></div>
			<h1 class="weui-header-title">访客列表</h1>
		</div>
        <div class="weui_cells mt0">
	        <div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">来访时间</label>
				</div>
	            <div class="weui_cell_bd weui_cell_primary">
	           		<input id="appointmentDate" name="appointmentDate" type="text" class="weui_input" placeholder="请选择来访时间"/>
	       		</div>
	        </div>
	        <div class="weui_cell"></div>
            <div class="weui_btn_area mb20">
		        <a href="javascript:" style="width: 40%;" class="weui_btn bg-blue" id="querySubmit">查询</a>
		    </div>
	    </div>
		<div class="weui_panel weui_panel_access mt0">
	       <div class="weui_cells mt0">
	       	  <div class="weui_cell lblue tz-history-title">访客列表<span id="totalCount"></span></div>
	       </div>
	       <div class="weui_panel_bd" id="teachertList">
	       </div>
	    </div>
	</div>
</div>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
	<script src="<%=basePath %>/js/picker.js"></script>
	<script src="<%=basePath %>/js/select.js"></script>
	<script>
		$(function(){
			$("#appointmentDate").datetimePicker({title:"选择来访时间",m:1});
			$("#appointmentDate").val(getTime(new Date(), 'yyyy-MM-dd'));
	 		var page = 0;
			var size = 10;
		    $('.weui_panel').dropload({
		        scrollArea : window,
		        autoLoad : true,//自动加载
		        domDown : {//上拉
		            domClass   : 'dropload-down',
		            domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
		            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
		            domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
		        },
		        domUp : {//下拉
		            domClass   : 'dropload-up',
		            domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
		            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>松手开始加载...</div>',
		            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
		        },
		        loadDownFn : function(me){//加载更多
		        	page++;
		        	var params = {
	        			page: page,
		    			rows: size,
		    			appointmentDate: $("#appointmentDate").val()
	    			};
	    			$.ajax({
	    	          	url : basePath + "/ls/visitor/appointment/page/query",
	    	  	 		type : "post",
	    	  	 		dataType : "json",
	    	  	 		data : params,
	    	            success: function(data){
	             		  if(data.rows.length == 0 || page*size >= data.total) {// 如果没有数据
	             			// 锁定
		                      me.lock();
		                      // 无数据
		                      me.noData();
	                      }
	             		  setTimeout(function(){
	             			 loadItemHtml(data);
		                      // 每次数据加载完，必须重置
	             			 me.resetload();
	             		  },200);
	                  },
	                  error: function(xhr, type){
	                  }
	              });      
		        }
		    });
		});
		function loadItemHtml(data) {
			var html = "";
			for(var i in data.rows) {
				var itm = data.rows[i];
				html += '<a href="<%=basePath%>/ls/visitor/appointment/detail/'+itm.id+'">\
				<div class="weui_cell weui_media_box weui_media_text">\
					<div class="weui_cell_bd weui_cell_primary">\
						<h4 class="weui_media_title">申请人：'+itm.visitorName+'</h4>\
						<p class="weui_media_desc">来访时间：'+getTime(itm.visitStartTime,'yyyy-MM-dd hh:mm')+'</p>\
						<p class="weui_media_desc">离开时间：'+getTime(itm.visitEndTime,'yyyy-MM-dd hh:mm')+'</p>\
						<p class="weui_media_desc">来访事由：'+itm.visitPurpose+'</p>\
						<p class="weui_media_desc">联系电话：<a href="tel:">'+itm.phoneNo+'</a></p>\
					</div></div></a>';
			}
			$("#teachertList").append(html);
		}
		
	</script>
</body>
</html>